<div class="col-sm-12 col-lg-3" id="region-province" style="margin-right: -25px;">
    <select id="province" name="province" class="select-option col-sm-10 select-opacity selectEdit select-border">
        <option value="">请选择</option>
        <?php foreach ($this->province_list as $province_info) { ?>
            <?php if ($this->province_id == $province_info['id']) { ?>
                <option selected
                        value="<?php echo $province_info['id']; ?>"><?php echo $province_info['RegionName'] ?></option>
            <?php } else { ?>
                <option value="<?php echo $province_info['id']; ?>"><?php echo $province_info['RegionName'] ?></option>
            <?php }
        } ?>
    </select>
</div>
<div class="col-sm-12 col-lg-3" id="region-city" style="margin-right: -25px;">
    <select id="city" name="city" class="select-option col-sm-10 select-opacity selectEdit select-border">
        <option value="">请选择</option>
        <?php foreach ($this->city_list as $city_info) { ?>
            <?php if ($this->city_id == $city_info['id']) { ?>
                <option selected value="<?php echo $city_info['id']; ?>"><?php echo $city_info['RegionName'] ?></option>
            <?php } else { ?>
                <option value="<?php echo $city_info['id']; ?>"><?php echo $city_info['RegionName'] ?></option>
            <?php }
        } ?>
    </select>
</div>
<div class="col-sm-12 col-lg-3" id="region-area">
    <select id="area" name="area" class="select-option col-sm-10 select-opacity selectEdit select-border">
        <option value="">请选择</option>
        <?php foreach ($this->area_list as $area_info) { ?>
            <?php if ($this->area_id == $area_info['id']) { ?>
                <option selected value="<?php echo $area_info['id']; ?>"><?php echo $area_info['RegionName'] ?></option>
            <?php } else { ?>
                <option value="<?php echo $area_info['id']; ?>"><?php echo $area_info['RegionName'] ?></option>
            <?php }
        } ?>
    </select>
</div>
<script>
    $('select[name=province]').change(function () {
        var form = {};
        form.id = $(this).val();
        form.type = 'province';

        if (form.id == '') {
            $('select[name=city]').html('<option value="">请选择</option>');
            $('select[name=area]').html('<option value="">请选择</option>');
            $('#region-area').show();
            return false;
        }
        $.post('/region/get-region', form, function (res) {
            if (res.code == 200) {
                var option = '<option value="">请选择</option>';
                var city = '';
                for (var i in res.result.city) {
                    city += '<option value="' + res.result.city[i].id + '">' + res.result.city[i].name + '</option>';
                }
                if (city == '') {
                    city = option;
                }
                $('select[name=city]').html(city);
                var area = '';
                for (var i in res.result.area) {
                    area += '<option value="' + res.result.area[i].id + '">' + res.result.area[i].name + '</option>';
                }
                if (area == '') {
                    area = option;
                    $('#region-area').hide();
                } else {
                    $('#region-area').show();
                }
                $('select[name=area]').html(area);
            } else {
                msg.error(res.message);
            }
        }, 'json');
    });

    $('select[name=city]').change(function () {
        var form = {};
        form.id = $(this).val();
        form.type = 'city';

        if (form.id == '') {
            $('select[name=area]').html('<option value="">请选择</option>');
            $('#region-area').show();
            return false;
        }

        $.post('/region/get-region', form, function (res) {
            if (res.code == 200) {
                var option = '<option value="">请选择</option>';
                var area = '';
                for (var i in res.result.area) {
                    area += '<option value="' + res.result.area[i].id + '">' + res.result.area[i].name + '</option>';
                }
                if (area == '') {
                    area = option;
                    $('#region-area').hide();
                } else {
                    $('#region-area').show();
                }
                $('select[name=area]').html(area);
            } else {
                msg.error(res.message);
            }
        }, 'json');
    });
</script>